<template setup>
  <main >
    <div class="top" @keydown.enter="clickSearch">
      <div class="iconBar" style="width: 20%">
        <img src="/src/assets/topBarImg.png">
      </div>
      <div class="searchBar">
        <div class="searchBar-box">
          <input class="searchBar-input" type="text" placeholder="请输入搜索内容" v-model="searchContent.content">
          <button class="searchBar-button" @click="clickSearch">搜索</button>
        </div>
      </div>
      <div class="userBar" style="width: 20%;display: flex">
        <a class="userBar-one" href="#" @click="toNextPage((userInfo.flag) ? '/shop-car': '/login')">
          <img src="/src/assets/shopCar.svg" style="height: 100%;width: 20%">
          <p >购物车</p>
        </a>
        <a class="userBar-two" href="#"  @click="toNextPage((userInfo.flag) ? '/user-info': '/login')">
          <img src="/src/assets/user.svg" style="height: 100%;width: 20%">
          <p>{{userInfo.flag ? userInfo.userName : "未登录"}}</p>
        </a>
      </div>
    </div>
    <div class="mid">
      <div class="mid-container">
        <div style="height: 415px;width: 100%;display: flex;justify-content: center;margin: 10px 0 20px 0;" v-show="carouselF">
          <div style="cursor: pointer;height: 395px;width: 15%;margin-right: 10px;background-color: #eeedf1;border-radius: 10px;padding: 10px;text-align: left">
            <h4 style="height: 12%;text-align: left">分类</h4>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/hotDoor.svg" style="height: 20px;width: 20px;margin-right: 10px">
              国家补贴抢先购 / 领券中心
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/tv2.svg" style="height: 20px;width: 20px;margin-right: 10px">
              电脑 / 配件 / 办公 / 文具
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/yx3.svg" style="height: 20px;width: 20px;margin-right: 10px">
              工业品 / 商业 / 农业 / 定制
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/ph4.svg" style="height: 20px;width: 20px;margin-right: 10px">
              家电 / 手机 / 通信 / 数码
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/safa5.svg" style="height: 20px;width: 20px;margin-right: 10px">
              女装 / 男装 / 内衣 / 配饰
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/yf6.svg" style="height: 20px;width: 20px;margin-right: 10px">
              女鞋 / 男鞋 / 运动 / 户外
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/shoot7.svg" style="height: 20px;width: 20px;margin-right: 10px">
              汽车 / 珠宝 / 文玩 / 箱包
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/car8.svg" style="height: 20px;width: 20px;margin-right: 10px">
              食品 / 生鲜 / 酒类 / 健康
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/cook9.svg" style="height: 20px;width: 20px;margin-right: 10px">
              母婴 / 童装 / 玩具 / 宠物
            </div>
            <div style="height: 8%;display: flex;align-items: center">
              <img src="/src/assets/mikep10.svg" style="height: 20px;width: 20px;margin-right: 10px">
              美妆 / 个护 / 娱乐 / 图书
            </div>
          </div>
          <div class="block text-center" style="width: 60%;">
            <el-carousel trigger="click" height="415px" style="border-radius: 10px">
              <el-carousel-item v-for="item in carouselList" :key="item">
                <img style="height: 100%;width: 100%;" :src="item.url">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div style="height: 400px;width: 15%;margin-left: 10px">
            <div style="height: 24%;width: 100%;cursor: pointer">
              <img style="height: 100%" src="https://img.alicdn.com/imgextra/i2/O1CN01qceCje1JrbZc8E0Qi_!!6000000001082-2-tps-512-176.png">
            </div>
            <div style="height: 24%;width: 100%;margin-top: 10px;cursor: pointer">
              <img style="height: 100%" src="https://img.alicdn.com/imgextra/i3/O1CN016YKcXX28kJftC6PXB_!!6000000007970-2-tps-512-176.png">
            </div>
            <div style="height: 24%;width: 100%;margin-top: 10px;cursor: pointer">
              <img style="height: 100%" src="https://img.alicdn.com/imgextra/i1/O1CN01UoFupT1WnZ5J5rKta_!!6000000002833-2-tps-512-176.png">
            </div>
            <div style="height: 24%;width: 100%;margin-top: 10px;cursor: pointer">
              <img style="height: 100%" src="https://img.alicdn.com/imgextra/i1/O1CN01bWoqwD1nFzWEe55WO_!!6000000005061-2-tps-512-176.png">
            </div>
          </div>
      </div>

        <div class="shopList" v-for="data in goods" v-show="data.flag" :key="data.id" >
          <a href="#" style="color: #1a1a1a;" @click="toNextPage('/goods-info',data)">
            <div class="image-container">
              <img style="box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);" :src="data.url" >
            </div>
            <div class="info-container" >
              <div>
                <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{data.info}}</p>
              </div>
              <div>
                <p style="color: #FF5000">￥{{data.price}}</p>
              </div>
            </div>
          </a>

        </div>
      </div>

    </div>
    <div class="low" ref="loader">
      <p style="color: #888888;width: 100%;">已经到底部了:24208090326</p>
    </div>

  </main>
</template>

<script setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref} from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()
import useUserInfoStore from "../stores/user.js";
import { storeToRefs } from "pinia";
const userInfoStore = useUserInfoStore();
const { accounts, userInfo} = storeToRefs(userInfoStore);
let goodInfo = reactive({
  id: 0,
  url: '',
  price: '',
  info: '',
  flag:0
});
let carouselF = ref(true);
const searchContent = reactive({
  content:""
});
const goods = reactive([
  { id: 0, url:"/src/assets/goodsImg01.png",price:0,info:"北京同仁堂甲状腺结节消散结贴专用消除甲亢脖子粗4a甲减消肿膏",flag:1},
  { id: 1, url:"https://img.alicdn.com/bao/uploaded/i1/2502670415/O1CN01eX00mq1Ew7K95HeFj_!!2502670415.jpg_460x460q90.jpg_.webp",price:12,info:"正品SFUKING狂飙王乒乓球拍",flag:1 },
  { id: 2, url:"https://img.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN01fIpHVB1S29e1tIpkK-890482188.jpg_460x460q90.jpg_.webp",price:45,info:"Nike耐克男子速干上衣春季" ,flag:1},
  { id: 3, url:"https://img.alicdn.com/bao/uploaded/i2/4154675436/O1CN01pEaMMK1q1k1ew48Mn_!!4611686018427384044-2-item_pic.png_460x460q90.jpg_.webp",price:45,info:"RTX5090 32G深度学习GPU显卡" ,flag:1},
  { id: 4, url:"https://img.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN016pUZcN1LUMjAOSd0n_!!397341302.jpg_460x460q90.jpg_.webp",price:555,info:"森马国潮熊猫刺绣速干短袖T恤男",flag:1 },
  { id: 5, url:"https://img.alicdn.com/imgextra/i4/880496338/O1CN01FaRdjn1wgrJdTPq9A_!!880496338-0-alimamacc.jpg_460x460q90.jpg_.webp",price:5,info:"立白大师香氛乌木玫瑰洗衣液",flag:1 },
  { id: 6, url:"https://img.alicdn.com/bao/uploaded/i2/2218819565350/O1CN01C7LvGB1pOM0BsRu6q_!!2218819565350.png_460x460q90.jpg_.webp",price:6,info:"新品上市 ASlCS跑鞋 KAHANA 8男女款复古透气运动老爹鞋鞋子配件" ,flag:1},
  { id: 7, url:"https://img.alicdn.com/bao/uploaded/i4/2616970884/O1CN01po87RP1IOvB1XQihc_!!4611686018427383428-0-item_pic.jpg_460x460q90.jpg_.webp",price:75,info:"g304机械无线鼠标罗技" ,flag:1},
  { id: 8, url:"https://img.alicdn.com/bao/uploaded/i4/1777552687/O1CN01aBj3fG1VihErVBBVZ_!!4611686018427383087-0-item_pic.jpg_460x460q90.jpg_.webp",price:65,info:"旺仔QQ糖40包休闲小零食软糖果汁糖水果糖儿时小吃网红旺旺大礼包",flag:1 },
  { id: 9, url:"https://img.alicdn.com/bao/uploaded/i2/3524733156/O1CN01Lmv7251ZBV2BTXM2U_!!3524733156.jpg_460x460q90.jpg_.webp",price:6,info:"【一万+人种草】CollinKnox男鞋",flag:1 },
  { id: 10, url:"https://img.alicdn.com/bao/uploaded/i2/700459267/O1CN01PmQcAX2IKLOU6gpCx_!!4611686018427382019-0-item_pic.jpg_460x460q90.jpg_.webp",price:0,info:"力士植萃小苍兰+樱花沐浴550g*2" ,flag:1},
  { id: 11, url:"https://img.alicdn.com/imgextra/i2/2215747999885/O1CN01sp6Ncb2MtNztuARiD_!!2215747999885-0-alimamacc.jpg_460x460q90.jpg_.webp",price:12,info:"naturelove甲钴胺维生素b族" ,flag:1},
  { id: 12, url:"https://img.alicdn.com/bao/uploaded/i4/1705231103/O1CN01pyYf1i1K1DuAWEoBa_!!4611686018427380479-0-item_pic.jpg_460x460q90.jpg_.webp",price:45,info:"热销3W+泰坦军团200Hz高刷显示器" ,flag:1},
  { id: 13, url:"https://img.alicdn.com/bao/uploaded/i3/2218616027311/O1CN01maaXe723sUgfWsrvX_!!4611686018427386031-0-item_pic.jpg_460x460q90.jpg_.webp",price:45,info:"【直降8300】SCOTT斯科特FOIL RC 10碳纤维电变公路自行车",flag:1 },
  { id: 14, url:"https://img.alicdn.com/bao/uploaded/i2/2214024510378/O1CN01qyfiVr1EfAhuL4sai_!!0-item_pic.jpg_460x460q90.jpg_.webp",price:555,info:"【实时金】金条9999足金古法",flag:1 },
  { id: 15, url:"https://img.alicdn.com/bao/uploaded///asearch.alicdn.com/bao/uploaded/O1CN01yPNzCQ1vcuHij18xB_!!4611686018427381618-0-item_pic.jpg_460x460q90.jpg_.webp",price:5,info:"飞利浦可移动按摩椅垫按摩靠垫床垫家用全身按摩器520礼物沙发用",flag:1 },
  { id: 16, url:"https://img.alicdn.com/bao/uploaded/i4/2981144773/O1CN01ApTmCE1l85T3VdDIL_!!4611686018427381957-0-item_pic.jpg_460x460q90.jpg_.webp",price:6,info:"璞赫简约实木滑梯多功能儿童床" ,flag:1},
  { id: 17, url:"https://img.alicdn.com/bao/uploaded/i1/443581057/O1CN01LjLbjm1Jg9fyT2JOh_!!443581057.jpg_460x460q90.jpg_.webp",price:75,info:"【暴走道具】星穹铁道【星核猎手】萨姆COS盔甲皮套铠甲" ,flag:1},
  { id: 18, url:"https://img.alicdn.com/bao/uploaded/i3/2213139494819/O1CN017oZ3oS1lT9anIimDQ_!!0-item_pic.jpg_460x460q90.jpg_.webp",price:65,info:"中国黄金999足金手链女新款花海" ,flag:1},
  { id: 19, url:"https://img.alicdn.com/bao/uploaded/i3/2215805744104/O1CN01IULJRK1gBgUOMD2jH_!!4611686018427384808-0-item_pic.jpg_460x460q90.jpg_.webp",price:6,info:"【12桶】兰州牛肉拉面整箱代餐",flag:1 },
  { id: 20, url:"https://img.alicdn.com/bao/uploaded/i3/1045477789/O1CN01mxjRZe27PPgzkn3te_!!0-item_pic.jpg_460x460q90.jpg_.webp",price:6,info:"英利奥（ENLIO）室内运动地胶",flag:1 },
  { id: 21, url:"https://img.alicdn.com/bao/uploaded/i2/1669874709/O1CN01s4ozQh1kem7R8BLci_!!4611686018427380757-0-item_pic.jpg_460x460q90.jpg_.webp",price:6,info:"双汇台式烤香肠38g*40包即食泡面",flag:1 },
  { id: 22, url:"https://img.alicdn.com/bao/uploaded/i4/2344693767/O1CN01eZIEls1dhL2B66uEd_!!2344693767.jpg_460x460q90.jpg_.webp",price:6,info:"蓝月亮薰衣草洁净洗衣液香味持久",flag:1 },
  { id: 23, url:"https://img.alicdn.com/bao/uploaded/i2/1105469085/O1CN01eEpJ2Y2GyzFzUTti9_!!0-item_pic.jpg_460x460q90.jpg_.webp",price:6,info:"纯手工正老式宗板栗饼 香",flag:1 },

]);
const carouselList = ref([
  {url:"https://gw.alicdn.com/imgextra/i1/O1CN01CZVirQ29K2ZhxkHc4_!!6000000008048-1-tps-2112-800.gif"},
  {url:"https://gw.alicdn.com/imgextra/i1/O1CN01NJPKCI1oN9KE4ry7R_!!6000000005212-1-tps-2112-800.gif"},
  {url:"https://gw.alicdn.com/imgextra/i1/O1CN01q2nVLm1JqENxGdAV3_!!6000000001079-1-tps-2112-800.gif"},
  {url:"https://gw.alicdn.com/imgextra/i2/O1CN01qRUIEz1tXIAujtWRV_!!6000000005911-1-tps-2112-800.gif"},
  {url:"https://gw.alicdn.com/imgextra/i2/O1CN01XNqbkw1syU4dGHy1b_!!6000000005835-1-tps-2112-800.gif"}
]);
const clickSearch = () => {
  console.log(accounts.value)
  console.log(userInfo.value.userName)
  const tmpL = goods.length;
  carouselF = (searchContent.content == "" ? 1 : 0);
  if(searchContent.content == ""){
    for (let i = 0; i < tmpL; i ++){
      goods[i].flag = 1;
    }
    return
  }
  for (let i = 0; i < tmpL; i ++){
    goods[i].flag = (goods[i].info.search(searchContent.content) != -1 ? 1 : 0);
  }
};
const toNextPage = (url,data) => {
  goodInfo = data;
  if(data != undefined)
    goodInfo.num = 1;
  router.push({
    path:url,
    query:goodInfo
  });
}
let observer = null; // IntersectionObserver 实例
const loader = ref(null);
onMounted(() => {
  observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          for(let i = 0;i < Math.min(goods.length,20);i ++){
            goods.push(goods[i]);
          }
        }
      },
      { threshold: 0.1 }
  );

  if (loader.value) {
    observer.observe(loader.value);
  }
});
// 组件卸载时停止观察
onUnmounted(() => {
  if (observer) {
    observer.disconnect();
  }
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
main {
  width: 100%;
  min-height: 100vh;
  justify-items: center;
  background-color: white;
  box-sizing: border-box;
}
.top {
  height: 80px;
  width: 100%;
  min-width: 1280px;
  display: flex;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}
.iconBar {
  position: relative;
  width: 20%;
  display: flex;
  align-items: center;
}


.searchBar {
  width: 60%;
  display: flex;
  align-items: center;
  position: relative;

}
.userBar {
  position: relative;
}
.searchBar-box {
  display: inline-block;
  height: 70%;
  width: 80%;
  margin: 0 auto;
  border: #FF5000 2px solid;
  border-radius: 10px;
  align-content: center;
}
.searchBar-input {
  height: 95%;
  width: 80%;
  border: 0;
  vertical-align: middle;
  padding-left: 10px;
  font-size: 20px;
}
.searchBar-input:focus {
  outline: none;
}

.searchBar-button {
  height: 80%;
  width: 14%;
  background-color: #FF5000;
  color: white;
  vertical-align: middle;
  border: 0;

}
.searchBar-button:focus {
  outline: none;
}
.searchBar-button:hover {
  background-color: #ed320c;
}
.userBar-one {
  width: 49%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}
.userBar-two {
  width: 49%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}

.mid {
  /*height: 500px;*/
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;

}
.mid-container {
  height: 100%;
  width: 100%;
  justify-content: center;
}

.shopList {
  width: 15%;
  box-sizing: border-box;
  display: inline-block;
  margin: 3px;
  padding: 5px;
}

.image-container {
  display: flex;
  justify-content: center;

}
.image-container img:hover {
  filter: brightness(80%);
}
.info-container{
  text-align: left;
  margin-top: 8px;
}

.low {
  height: 30px;
  width: 100%;
  border-top: 1px solid gray;
  text-align: center;
}



img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>